---
title: Switch
description: A control enabling the user to switch between a checked and unchecked state.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/components/ui/switch?raw';

<LinkButton href='https://rn-primitives.vercel.app/switch'>Switch Primitive</LinkButton>
<LinkButton target='_blank' href='https://rnr-showcase.vercel.app/switch'>
  Demo
</LinkButton>

<br />

A control enabling the user to switch between a checked and unchecked state.

### Installation

<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add switch
    ```
  </TabItem>
  <TabItem label='Manual'>
    <Aside type='tip' title='Dependencies'>
      Before copy/pasting, add the <a href='https://rn-primitives.vercel.app/switch' className='text-white font-bold'>switch primitive</a> to your project.
    </Aside>

    <br />

    **Copy/paste the following code to `~/components/ui/switch.tsx`:**

    <Code code={importedCode} lang='tsx' title='~/components/ui/switch.tsx' />
  </TabItem>
</Tabs>


### Usage

```tsx
import * as React from 'react';
import { View } from 'react-native';
import { Label } from '~/components/ui/label';
import { Switch } from '~/components/ui/switch';

function Example() {
  const [checked, setChecked] = React.useState(false);

  return (
    <>
      <View className='flex-1 justify-center items-center p-6 gap-12'>
        <View className='flex-row items-center gap-2'>
          <Switch checked={checked} onCheckedChange={setChecked} nativeID='airplane-mode' />
          <Label
            nativeID='airplane-mode'
            onPress={() => {
              setChecked((prev) => !prev);
            }}
          >
            Airplane Mode
          </Label>
        </View>
      </View>
    </>
  );
}
```

## Props

### Switch

Extends [`Pressable`](https://reactnative.dev/docs/pressable#props) props

|     Prop     |           Type           |     Note     |
| :----------: | :----------------------: | :----------: |
|     checked     |   boolean         |  |
|     onCheckedChange     |   (checked: boolean) => void         |  |
|   disabled   |         boolean          | _(optional)_ |
| onKeyDown | (ev: React.KeyboardEvent) => void | Web Only _(optional)_ |